あのゲームのユーザーIDをスプレッドシートにQRコード表示して友達申請を楽にする
先日リリースされたあのゲーム、クラスメソッドでも多くの社員が楽しんでいます。
当然のようにSlackにルームが作られ、IDを交換し、友達申請しているのですが・・・
IDを手入力するのが辛い
多くのプレイヤーはSlackやSNSの投稿からIDをコピペしてIDを入力→申請すると思います。しかしスマートフォンだとコピペ操作がなかなかめんどくさいです。
せっかくQRコードの読み取り機能があるのでこれを使って入力したい！ というわけで、Google スプレッドシートにIDを入力するとQRコードを表示してくれるものを作ってみました。
QRコードの中身は何か？
ゲーム中に自分のQRコードを表示する機能があるので表示させてQRコードリーダーアプリで読み取ってみるとQRコードの中身はユーザーIDでした。 これをQRコードにすれば良さそうです。
テキストからQRコード画像を生成する
Google Charts APIにQRコード を生成できるAPIがあったのでこれを使ってみます。
（注 このAPIはdeprecated なのですが、今回の用途では使えなくなったり仕様が変わっても問題ないので目を瞑ることにします）
QRコード API
ベースURL https://chart.googleapis.com/chart に対して下記のパラメータを指定することでQRコードを生成できます。
cht=qr(必須) 生成するチャートのタイプを指定する？値としてqrを固定で指定しますchs=<width>x<height>(必須)<高さ>x<幅>という形式で画像サイズ（ピクセル数）を指定します。chl=data(必須) QRコードに含めるデータを指定します。つまりここがユーザーIDですchoe=<output_encoding>エンコード時の文字コードです。デフォルトのUTF8で大丈夫でしたchld=<error_correction_level>|<margin>エラー訂正レベルなどを指定します。こちらもデフォルトで大丈夫でした
これを使ったQRコード用生成用のURLは下記のようになります （ここではA2セルにIDが入っているものとします）
='https://chart.googleapis.com/chart?cht=qr&chs=300x300&chl='& SUBSTITUTE(A2, " ", "")
SUBSTITUTEで空白を削除しているのはIDに空白が入っているとURLパラメータとして正しく指定できないからです!（重要)
スプレッドシートに画像を表示する
スプレッドシートに画像を表示するにはIMAGE関数を使います。 画像のURLとしてQRコード用のURLを以下のように指定します。
=IMAGE(<QRコードのURL>, 4, 300, 300)
ここでポイントは2つ目の引数以降で、画像の表示モードとサイズを指定している点です。
第２引数に表示モード4 を指定すると第3引数以降で画像の表示サイズを指定できます。
これによってスプレッドシート上にアプリから読み取りやすいサイズで表示ができるのです！(重要)
行の高さをまとめて変更する
仕上げに次の操作で画像の大きさに合わせて行の高さを一括で変更します。
行の高さの変更
- 変更したい行を選択する
- 行番号が表示されている領域で右クリック
- 「行X-Y のサイズを変更」をクリックで開くダイアログから設定
まとめ
友達１００人(仕様上の上限）できるかな
